<template lang="html">
  <div class="vue-datepicker-wrap" id="">
    
    <div class="showTime">
      <span v-if="startTime.month==''">入住时间</span>
      <span v-else>{{startTime.month}}月{{startTime.date}}日<br/>周{{startTime.day}}</span>
      <span v-if="endTime.month==''">离开时间</span>
      <span v-else>{{endTime.month}}月{{endTime.date}}日<br/>周{{endTime.day}}</span>
    </div>
    <div class="vue-datepicker-header" @click.stop="">
        <span @click.stop="switchMonth(-1)"
          class="vue-datepicker-header-btn vue-datepicker-header-btn-pre">
          <img src="@/assets/images/right-icon@2x.png" alt="" width="10" class="rotate180">
        </span>
        <!-- <span @click.stop="selectYear=!selectYear" -->
        <span
             class="vue-datepicker-header-btn vue-datepicker-header-btn-day">
            {{select.year}} - {{select.month<10?('0'+select.month):select.month}}
        </span>
        <span @click.stop="switchMonth(1)"
          class="vue-datepicker-header-btn vue-datepicker-header-btn-next">
          <img src="@/assets/images/right-icon@2x.png" alt="" width="10">
        </span>
    </div>
    <div class="weekDiv">
      <span v-for="week in weekArr" :key="week.key">{{week}}</span>
    </div>
    <div class="vue-datepicker-content">
      <table>
        <tbody>
            <tr v-for="week of list">
                <td v-for="weekday of week" @click="pick(weekday)"
                    :class="{
                        'flag': weekday.flag,
                        'active': !weekday.flag && weekday.text == current.date
                             && select.month == current.month && select.year == current.year}">
                    <em>{{weekday.text}}</em>
                </td>
            </tr>
        </tbody>
      </table>
    </div>
    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="rentTimeEvent">确定</button>
    </div>
  </div>
</template>

<script src="./rentTime.js"></script>

<style lang="scss" scoped src="./rentTime.scss"></style>
